<template>
    <div class="login">
        <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
            <h3 class="title">后台管理系统</h3>
            <el-form-item prop="username">
                <el-input v-model="loginForm.username"
                type="text" size="large" auto-complete="off"
                placeholder="账号">
                    <template #prefix><svg-icon icon="user" /></template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="loginForm.password"
                    type="password" size="large" auto-complete="off"
                    placeholder="密码" show-password @keyup.enter="handleLogin">
                    <template #prefix><svg-icon icon="password" /></template>
                </el-input>
            </el-form-item>

            <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
                    <el-form-item style="width:100%;">
                        <el-button size="large" type="primary" style="width:100%;"
                            @click.prevent="handleLogin">
                            <span>登 录</span>
                        </el-button>
                    </el-form-item>


        </el-form>

    </div>
</template>


<script setup>

    import { ref } from 'vue'; //必须要用的
    import request from '@/util/request'
    import store from '@/store'
    import qs from 'qs' // qs框架可以将 表单对象转成url字符串
    import {ElMessage} from 'element-plus'
    import router from '@/router'
    import Cookies from 'js-cookie'
    import {encrypt,decrypt} from "@/util/jsencrypt";

    const loginRef = ref(null)
    //form表单对象
    const loginForm = ref({
        username: '',
        password: '',
        rememberMe: false,  //记住密码
    })

    //验证规则
    const loginRules = {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
    };

    //点击登录
    const handleLogin= ()=> {
        loginRef.value.validate(async valid => {
            if(valid){
              // 记住密码这个动作操作的是cookie
              if (loginForm.value.rememberMe){ //选中记住密码
                Cookies.set("username",loginForm.value.username,{expires:1});
                Cookies.set("password",encrypt(loginForm.value.password),{expires:1});
                Cookies.set("rememberMe",loginForm.value.rememberMe,{expires:1});
              }else {
                Cookies.remove("username");
                Cookies.remove("password");
                Cookies.remove("rememberMe");
              }

               let res = await request.post('/login?'+qs.stringify(loginForm.value))
               if(res.code == '0') {
                  store.commit('SET_TOKEN',res.data.token)
                  store.commit('SET_MENULIST',res.data.menuList)
                  store.commit('SET_USERINFO',res.data.currentUser)
                  //登录成功跳转到首页
                  router.replace('/')
               }else{
                   ElMessage.error(res.msg)
               }

            }else{console.log("验证失败")}
        })
    }

    // 获取cookie内容: 打开页面就看到登录过的用户名和密码
    function getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get("rememberMe");
      loginForm.value = {
        username: username === undefined ? loginForm.value.username : username,
        password: password === undefined ? loginForm.value.password :
            decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    }
    getCookie();


</script>


<style lang="scss" scoped>
a{
color:white
}
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-size: cover;
}
.title {
margin: 0px auto 30px auto;
text-align: center;
color: #707070;
}
.login-form {
border-radius: 6px;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
.el-input {
height: 40px;
input {
display: inline-block;
height: 40px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 0px;
}
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
width: 33%;
height: 40px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
}
}
.el-login-footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
}
.login-code-img {
height: 40px;
padding-left: 12px;
}
</style>